<template>
    <div class="upload-files">
        <h2>音频/文本文件导入</h2>
        <div class="course-type">
            <label>课程类型：</label>
            <el-radio-group v-model="selectedCourseType">
                <el-radio-button label="初中英语">初中英语</el-radio-button>
                <el-radio-button label="中考真题">中考真题</el-radio-button>
                <el-radio-button label="高中英语">高中英语</el-radio-button>
                <el-radio-button label="高考真题">高考真题</el-radio-button>
                <el-radio-button label="CET4">CET4</el-radio-button>
                <el-radio-button label="CET6">CET6</el-radio-button>
            </el-radio-group>
        </div>
        <div class="upload-area" @dragover.prevent="handleDragOver" @drop.prevent="handleDrop">
            <p v-if="fileList.length === 0">请将文件拖动至此区域。</p>
            <div v-else>
                <p>已选择文件：</p>
                <ul>
                    <li>{{ fileList[0].name }}</li>
                </ul>
            </div>
            <div class="drag-drop-area" v-if="fileList.length === 0">
                <i class="el-icon-plus"></i>
            </div>
            <p>注意：请将错题音频文件与错题文本文件打包成zip格式的压缩包。</p>
        </div>
        <!-- 上传按钮单独一个容器，通过margin自动居中 -->
        <div class="upload-button-container">
            <el-button type="primary" @click="uploadFiles" :loading="isLoading">生成错题文件</el-button>
            <el-button type="default" style="margin-right: 40px" @click="cancelUpload">取消上传错题文件</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedCourseType: "初中英语", // 默认选中的课程类型
            fileList: [], // 用于存储已选择的文件列表
            isLoading: false, // 控制加载状态
            loadingElement: null, // 用于显示加载效果的元素
        };
    },
    methods: {
        handleDragOver(event) {
            event.preventDefault();
        },
        handleDrop(event) {
            event.preventDefault();
            const files = event.dataTransfer.files;
            if (files.length > 1) {
                this.$message.error("只能上传一个文件");
                return;
            }
            this.fileList = Array.from(files); // 清空旧文件并添加新文件
        },
        uploadFiles() {
            if (this.fileList.length === 0) {
                this.$message.error("请选择要上传的文件");
                return;
            }
            this.isLoading = true; // 开始加载
            setTimeout(() => {
                this.isLoading = false; // 结束加载
                this.$message.success("文件上传成功");
                this.fileList = []; // 上传成功后清空文件列表
                this.$emit("close-upload-dialog"); // 触发父组件的事件
            }, 3000); // 模拟3秒上传时间
        },
        cancelUpload() {
            this.fileList = []; // 取消上传时清空文件列表
            this.$emit("cancle-upload"); // 触发父组件的事件
        },
    },
};
</script>

<style scoped>
.upload-files {
    padding: 20px;
}

.course-type {
    margin-bottom: 20px;
}

.upload-area {
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    /* 使上传区域内容居中 */
    margin-bottom: 20px;
}

.drag-drop-area {
    border: 1px dashed #d9d9d9;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.drag-drop-area i {
    font-size: 24px;
    color: #d9d9d9;
}

.upload-button-container {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    margin-top: 20px;
}
</style>
